<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/videoWeb/layui-v2.5.7/layui/css/layui.css">
    <link rel="stylesheet" href="/videoWeb/element/element.css">
    <script src="/videoWeb/js/Jquery.js" ></script>
    <script tsrc="/videoWeb/layui-v2.5.7/layui/layui.js"></script>
    <script src="/videoWeb/js/vue.js"></script>
    <script src="/videoWeb/element/element.js"></script>
    <title>更多</title>
</head>

<style>

  #head{
    position: fixed;
    width:100%;
    top:0;
    z-index:100;
  }

  #app_div1{
    width: 100%;
    height: 80vh;
    display: flex;
    /* border: 1px solid red; */
    /* background: linear-gradient(#f7e6d3, #fbfcfd); */
    justify-content: center;
    align-items: center;
    margin-top: 60px;
  }

  #app_div2{
    width: 100%;
    min-height: 250px;
    display: flex;
    /* border: 1px solid red; */
    /* background: rgb(245,247,250); */
    justify-content: center;
    align-items: center;
  }

  #app_div2_div1{
    width: 75%;
    min-height: 250px;
    display: flex;
    border-top: 1px solid rgb(229,233,239);
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .app_div2_div1_div{
    width: 15%;
    height: 200px;
    border: 1px solid rgb(229,233,239);
    margin-top: 2.3%;
    border-radius: 2%;
  }

  .app_div2_div1_div_div1{
    width: 100%;
    height: 45%;
    /* border: 1px solid red; */
    border-radius: 3px;
  }

  .app_div2_div1_div_div1>img{
    width: 100%;
    height: 100%;
    border-radius: 3px ;
  }
  /*  */
  .app_div2_div1_div_div2{
    width: 100%;
    height: 55%;
    /* border: 1px solid red; */
  }

  .app_div2_div1_div_div2_div1{
    width: 90%;
    height: 45%;
    /* border: 1px solid red; */
    margin:auto;
    overflow:hidden;
    font-size: 12px;
    line-height: 25px;
  }

  .app_div2_div1_div_div2_div2{
    width: 90%;
    height: 25%;
    /* border: 1px solid red; */
    margin:auto;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #99a2aa;
  }

  .app_div2_div1_div_div2_div3{
    width: 90%;
    height: 25%;
    /* border: 1px solid red; */
    margin:auto;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #99a2aa;
  }

  /*  */
  /*  */

  #app_div3{
    width: 100%;
    height: 80vh;
    display: flex;
    /* border: 1px solid red; */
    background: rgb(242,242,242);
    justify-content: center;
    align-items: center;
  }

  #app_div3_div1{
    /* border: 1px solid red; */
    width: 80%;
    height: 100%;
  }

  #app_div3_div1_div1{
    width: 100%;
    height: 10%;
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
  }

  #app_div3_div1_div1>span{
    font-size: 20px;
  }

  .app_div3_div1_div1_div{
    width: 80%;
    height: 100%;
    /* border: 1px solid red; */
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  #app_div3_div1_div2{
    width: 100%;
    height: 90%;
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .app_div3_div1_div2_div{
    width: 23%;
    height: 45%;
    border: 1px solid rgb(233, 233, 233);
    border-radius: 5px;
    box-shadow:0px 4px 4px 4px #888888;
  }

  .app_div3_div1_div2_div1{
    /* border: 1px solid red; */
    width: 100%;
    height: 55%;
    border-radius: 5px 5px 0px 0px;
  }

  .app_div3_div1_div2_div1>img{
    border-radius: 5px 5px 0px 0px;
    width: 100%;
    height: 100%;
  }

  .app_div3_div1_div2_div2{
    /* border: 1px solid red; */
    width: 100%;
    height: 45%;
    border-radius:0px 0px 5px 5px;
  }

  .app_div3_div1_div2_div2_div1{
    /* border: 1px solid red; */
    width: 95%;
    height: 40%;
    font-size: 14px;
    color: #545C63;
    line-height: 20px;
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */
    overflow: hidden;
    padding-top: 5px;
    padding-bottom: 5px;
    margin:auto;
  }

  .app_div3_div1_div2_div2_div2{
    /* border: 1px solid red; */
    width: 95%;
    height: 20%;
    display: flex;
    align-items: center;
    color: #9199A1;
    font-size: 12px;
    margin:auto;
  }

  .app_div3_div1_div2_div2_div3{
    /* border: 1px solid red; */
    width: 95%;
    height: 25%;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #F01414;
    margin:auto;
    font-weight: 700;
  }

  .login_tity{
    display: flex;
    width: 100%;
    height: 21vh;
    /* border: solid 1px black; */
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #666666;
  }

  .links{
    /* border: solid 1px black; */
  }

  .links>a{
    text-decoration: none;
    margin: 10px;
    color: #666666;
  }

  .copyright{
    text-align: center;
    margin-top: 10px;
  }

</style>
<body>
<div id="app">
  <el-menu :default-active="activeIndex" class="el-menu-demo" id="head" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">
      <el-image style="width: 100px; height: 50px" :src="url" :fit="fit"></el-image>
    </el-menu-item>
    <el-menu-item index="1"><a href="/videoWeb/fronts/index.html"><i class="el-icon-s-home"></i>主页</a></el-menu-item>
    <el-menu-item index="2">实战课</el-menu-item>
    <el-menu-item index="3">体系课</el-menu-item>
    <el-menu-item index="4"><a href="" target="_blank">手记</a></el-menu-item>
    <el-menu-item >
      <el-input placeholder="请输入关键字" v-model="input" clearable style="width:250px"></el-input>
      <el-button size="medium" icon="el-icon-search"></el-button>
    </el-menu-item>

    <el-menu-item style="float: right;" v-if="code != 100">
      <a href="">注册</a>
      /
      <a href="login.html">登录</a>
    </el-menu-item>

    <el-submenu index="5" style="float: right;" v-if="code === 100">
      <template slot="title">
        <div class="demo-type" style="display:inline-block">
          <div>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          </div>
        </div>
      </template>
      <el-menu-item index="5-1" style="color:black;font-weight:700;text-align:center;">{{name}}</el-menu-item>
      <el-menu-item index="5-2"></el-menu-item>
      <el-menu-item index="5-3" @click="loginOut"><i class="el-icon-switch-button"></i>退出</el-menu-item>
    </el-submenu>

    <el-menu-item style="float: right;"><i class="el-icon-user"></i></el-menu-item>
    <el-menu-item style="float: right;"><a href="/videoWeb/fronts/home.html">创作中心</a></el-menu-item>

  </el-menu>

  <div id="app_div1">

  </div>

  <div id="app_div2">
      <div id="app_div2_div1">

          <div class="app_div2_div1_div" v-for="item in videoList" >
              <a :href="'/videoWeb/fronts/videoDetails.html?videoId=' + item.id ">
                  <div class="app_div2_div1_div_div1">
                      <img :src="item.imgSrc" alt="">
                  </div>

                  <div class="app_div2_div1_div_div2">
                      <div class="app_div2_div1_div_div2_div1">
                        {{item.explain}}
                      </div>
                      <div class="app_div2_div1_div_div2_div2">
                        <i class="el-icon-video-camera-solid" style="margin-right: 3px;"></i>{{item.videoView}}
                      </div>
                      <div class="app_div2_div1_div_div2_div3">
                        {{item.username}}
                      </div>
                  </div>
              </a>
          </div>

      </div>

  </div>

  <div class="block" style="margin-top: 25px; margin-left: 11.5%;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="pageNo"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="pagesTotalCount">
      </el-pagination>
  </div>

  <div class="login_tity">
    <div class="links">
      <a href="">
        关于我们
      </a>
      |
      <a href="">
        联系我们
      </a>
      |
      <a href="">
        人才招聘
      </a>
      |
      <a href="">
        商家入驻
      </a>
      |
      <a href="">
        广告服务
      </a>
      |
      <a href="">
        手机蛇皮
      </a>
      |
      <a href="">
        友情链接
      </a>
      |
      <a href="">
        销售联盟
      </a>
      |
      <a href="">
        蛇皮社区
      </a>
      |
      <a href="">
        蛇皮公益
      </a>
      |
      <a href="">English Site</a>
      <div class="copyright">
        Copyright&nbsp;©&nbsp;2004-2021&nbsp;&nbsp;蛇皮SP.com&nbsp;版权所有
      </div>
    </div>

  </div>

</div>
</body>

<script>
    new Vue({
        el:'#app',
        data:{
          url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          code:1,
          name:"",
          id:0,
          //分页参数
          pageNo:1,//当前页码
          pageSize:24,//每页个数
          pageTotal:0,//页码数
          pagesTotalCount:0,//总条数
          videoList:[],
          videoView:0,
        },
        mounted:function(){
          this.login();
          this.handleCurrentChange();
        },
        methods:{
            isCollapse: true,
            login:function(){//获取登录token信息
                var that = this;
                $.ajax({
                    url:"/videoWeb/getUserMessageOfLogin",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    success:function(res){
                        if(res.code == 100){
                            that.code = res.code;
                            that.name = res.data.username;
                            that.id = res.data.id;
                        }
                        if(res.code == 401){
                            location.href="../../../../fronts/login.html";
                        }
                    }
                })
            },
            loginOut:function(){//退出
                $.ajax({
                    url:"/videoWeb/loginOut",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    success:function(res){
                      location.href="../../../../fronts/login.html";
                    }
                })
            },
            getUrlParam: function (name) {//获取url中的参数
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg); //匹配目标参数
                if (r != null)
                  return unescape(r[2]);
                return null; //返回参数值
            },
            handleCurrentChange:function(){//分页改变时会触发
                var that = this;
                var type= this.getUrlParam('type');
                if(type == 'newMore'){
                    console.log(type);
                    $.ajax({
                        url:"/videoWeb/videoNewest",
                        headers:{
                            Authorization:localStorage.Authorization,
                        },
                        data:{
                          pageNo:this.pageNo,
                          pageSize:this.pageSize,
                        },
                        success:function(res){
                          console.log(res);
                          that.videoList = res.items;
                          that.pageTotal = res.pageTotal;
                          that.pagesTotalCount = res.pagesTotalCount;
                        }
                    })
                    return false;
                }else if(type == 'hotMore'){
                    $.ajax({
                        url:"/videoWeb/hotVideo",
                        headers:{
                            Authorization:localStorage.Authorization,
                        },
                        data:{
                          pageNo:this.pageNo,
                          pageSize:this.pageSize,
                        },
                        success:function(res){
                          that.videoList = res.items;
                          that.pageTotal = res.pageTotal;
                          that.pagesTotalCount = res.pagesTotalCount;
                        }
                    })
                    return false;
                }
            },
        },
    })
</script>

</html>
